<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Text Examples</title>
</head>
<body>

<h1>Canvas Text Examples</h1>
<p><i>The red boxes are the measured text rects</i></p>

<em>Canvas font size</em><br>
<canvas id="canvas0" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas0');
    const ctx = canvas.getContext('2d');

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.strokeStyle = '#f00';

    let y = 8;
    for (let fontSize = 8; fontSize <= 64; fontSize += 8) {
        ctx.font = `${fontSize}px sans-serif`;
        const text = `Font size: ${fontSize}px`;
        ctx.fillText(text, 8, y);
        ctx.strokeRect(8, y, ctx.measureText(text).width, fontSize);
        y += fontSize + 8;
    }
})();
</script>

<em>Canvas font family</em><br>
<canvas id="canvas1" width="600" height="250" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.strokeStyle = '#f00';

    const families = ['monospace', 'serif', 'fantasy', 'sans-serif', 'cursive'];
    let y = 8;
    for (const family of families) {
        ctx.font = `32px ${family}`;
        const text = `Font family: ${family}`;
        ctx.fillText(text, 8, y);
        ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
        y += 32 + 8;
    }
})();
</script>

<em>Canvas font weight</em><br>
<canvas id="canvas2" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas2');
    const ctx = canvas.getContext('2d');

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.strokeStyle = '#f00';

    let y = 8;
    for (let fontWeight = 100; fontWeight <= 900; fontWeight += 100) {
        ctx.font = `${fontWeight} 32px sans-serif`;
        const text = `Font weight: ${fontWeight}`;
        ctx.fillText(text, 8, y);
        ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
        y += 32 + 8;
    }
})();
</script>

<em>Canvas font style</em><br>
<canvas id="canvas3" width="600" height="150" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas3');
    const ctx = canvas.getContext('2d');

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.strokeStyle = '#f00';

    const styles = ['normal', 'italic', 'oblique'];
    let y = 8;
    for (const style of styles) {
        ctx.font = `${style} 32px sans-serif`;
        const text = `Font style: ${style}`;
        ctx.fillText(text, 8, y);
        ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
        y += 32 + 8;
    }
})();
</script>

<em>Canvas text-align</em><br>
<canvas id="canvas4" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas4');
    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2, canvas.height);
    ctx.stroke();

    ctx.font = '16px sans-serif';
    ctx.textBaseline = 'top';

    const alignments = ['left', 'center', 'right', 'start', 'end'];
    let y = 8;
    for (const alignment of alignments) {
        ctx.textAlign = alignment;
        ctx.fillText(`Text align: ${alignment}`, canvas.width / 2, y);
        y += 16 + 8;
    }
})();
</script>

<em>Canvas text-baseline</em><br>
<canvas id="canvas5" width="1000" style="border: 1px solid black;"></canvas><br><br>

<script>
(function () {
    const canvas = document.getElementById('canvas5');
    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.stroke();

    ctx.font = '12px sans-serif';
    ctx.textAlign = 'left';

    const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
    let x = 8;
    for (const baseline of baselines) {
        ctx.textBaseline = baseline;
        ctx.fillText(`Baseline: ${baseline}`, x, canvas.height / 2);
        x += canvas.width / baselines.length;
    }
})();
</script>

</body>
</html>
